<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>QuDEx Repository Tools - Collections Manager</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<ol class="breadcrumb">
			<li th:text="#{breadcrumbs.process.opselection}">Repository
				operations selection</li>
			<li th:text="#{breadcrumbs.process.new-continue}">New/continue
				collection creation</li>
			<li class="active" th:text="#{breadcrumbs.process.collection}">Add
				collection template</li>
		</ol>
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{process.col.column2.title}" class="panel-title">Information</h3>
					</div>
					<div class="panel-body">
						<a th:text="#{process.col.column1.link}" href="#"
							data-toggle="collapse" data-target="#divInfo">Description
							of Collection-level Spreadsheet (show/hide)</a>
						<div id="divInfo" class="panel-collapse collapse">
							<div class="panel-body" th:utext="#{info.spreadsheet.collection}">
								<h4>More information</h4>
								<p>The Collection Level spreadsheet is used to describe
									either QuDEx collections or sub-collections.</p>
								<p>A QuDex Collection is a Fedora Object that contains
									metadata annotations to describe a Qualitative Study and also
									contains the QuDEx XML document describing all the documents
									and elements associated with this study. The XML instance is
									stored as a special data type within the object.</p>
							</div>
						</div>
						<p>
							<b th:text="#{process.col.column1.note}">Notes</b>
						</p>
						<p th:utext="#{process.col.column1.text}">
							<b>*</b> If a collection is selected, the relationship
							information in the spreadsheet (field rel:isPartOf) will be
							ignored. In other words, all the collections described in the
							spreadsheet will be sub-collections of selected Collection.
						</p>
						<!-- AMG ADDED CANCEL FORM HERE -->
						<form id="side-form" th:action="${flowExecutionUrl}" method="post">
							<input th:value="#{process.col.column2.form.cancel}"
								data-toggle="popover"
								th:attr="data-content=#{process.col.column1.tooltip.cancel}"
								class="btn btn-danger" name="_eventId_cancel" type="submit"
								value="Cancel" />
						</form>
						<br />
						<div th:if="${continueCollectionCreation}">
							<p th:utext="#{process.col.column1.text1}" style="color: navy;">You
								can skip the process of adding collection/subcollections to the
								selected collection and go directly to &#34;Upload Files
								Spreadsheet&#34;</p>
							<a class="btn btn-primary" th:text="#{process.col.column1.link2}"
								th:href="@{'~' + ${flowExecutionUrl}(_eventId=skipCollection)}">Upload
								Files Spreadsheet</a>
						</div>
						<div id="error"
							th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
							<h2 th:text="#{process.col.column1.error}">Errors</h2>
							<font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.spreadsheet')}"
								th:text="${message.text}" color="red">the error message</font> <font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.collectionsIds')}"
								th:text="${message.text}" color="red">the error message</font>
						</div>
					</div>
				</div>
			</div>
			<!-- END COLUMN 1 -->
			<!-- COLUMN 2 -->
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{process.col.column1.title}" class="panel-title">Collection-level
							Spreadsheet</h3>
					</div>
					<div class="panel-body">
						<ul class="nav nav-tabs">
							<li class="active"><a th:text="#{process.col.column1.tab1}"
								href="#intro" data-toggle="tab">Introduction</a></li>
							<li><a th:text="#{process.col.column1.tab2}"
								href="#root-collection" data-toggle="tab">Add Root
									Collection</a></li>
							<li><a th:text="#{process.col.column1.tab3}"
								th:unless="${rootCollection == ''}" href="#sub-collection"
								data-toggle="tab">Add Sub-collection</a></li>
						</ul>
						<div class="tab-content">
							<p></p>
							<div class="tab-pane fade in active" id="intro">
								<p th:utext="#{process.col.column2.intro.text}">The first
									step to create a collection in the repository from scratch is
									to upload the collection&#39;s templates (i.e. collection-level
									templates), beginning with the top-level collection template
									and continuing with sub-collection templates.</p>
								<p th:utext="#{process.col.column2.intro.text2}">There are
									two different scenarios when creating a collection. The first
									scenario involves creating a new collection in the repository.
									The second scenario involves continuing the process of loading
									a collection in the repository, that is, the top-level
									collection has already been uploaded into the repository
									previously (perhaps along with sub-collection templates) but no
									files have been associated with them. This means that no QuDEx
									instance document has been created, therefore we can continue
									to modify the collection&#39;s structure, and now we could add
									files to it.</p>
							</div>
							<div id="root-collection" class="tab-pane fade">
								<p th:text="#{process.col.column2.text}">Upload a
									Collection/Sub-collection Spreadsheet. This will create the
									QuDEX collection/sub-collection objects in Fedora Repository.</p>
								<div th:if="${printTree}" th:utext="${printTree.get(0)}"
									class="well">the printed tree here</div>
								<div th:if="${rootCollection == ''}">
									<form id="form-collection" th:action="${flowExecutionUrl}"
										method="post" enctype="multipart/form-data"
										class="form-horizontal">
										<fieldset>
											<legend th:text="#{process.col.column2.form1.title}">1.
												Upload a Collection-level spreadsheet</legend>
											<p th:if="${collectionsList.size() == 0}"
												th:utext="#{process.col.column2.text2}">Upload a
												top-level collection spreadsheet</p>
											<p th:utext="#{process.col.column2.text3}"
												th:unless="${collectionsList.size() == 0}">
												<b><i>No collections/sub-collections available in
														the repository yet.</i></b>
											</p>
											<p th:unless="${collectionsList.size() == 0}"
												th:utext="#{process.col.column2.text4}">
												The repository does not contain any
												collection/sub-collection. So the spreadsheet can only be a
												top-level collections spreadsheet (with <b>NO</b>
												rel:isPartOf field in it)
											</p>
											<div id="root-col-sp" class="form-group">
												<label class="col-md-4 control-label" for="sp-upload-1"><span
													th:text="#{process.col.column2.form.browse.label}"></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<div class="input-group">
															<span class="input-group-btn"> <span
																class="btn btn-primary btn-file"> <span
																	th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																	<input name="spreadsheet" id="sp-upload-1" type="file"
																	class="form-control" />
															</span><input type="text" class="form-control"
																readonly="readonly" />
															</span>
														</div>
														<span th:utext="#{process.col.column2.form.browse.help}"
															class="help-block"> Select the file to upload</span>
													</div>
												</div>
												<input th:field="${filesModel.collectionsIds}" type="hidden"
													value="NOCOLLECTION" />
											</div>
											<div id="root-col-sp-2" class="form-group">
												<label class="col-md-4 control-label" for="load"><span></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<input id="load" class="btn btn-primary"
															th:value="#{process.col.column2.form.submit}"
															name="_eventId_uploadNoCol" type="submit"
															value="Upload Spreadsheet" />
													</div>
												</div>
											</div>
										</fieldset>
									</form>
								</div>
								<!-- Root collection already present -->
								<div th:unless="${rootCollection == ''}">
									<form id="form-collection2" th:action="${flowExecutionUrl}"
										class="form-horizontal" method="post"
										enctype="multipart/form-data">
										<fieldset>
											<legend th:text="#{process.col.column2.form1.title}">1.
												Upload a Collection-level spreadsheet</legend>
											<p th:text="#{process.col.column2.text5}">Use this option
												if uploading a top-level collection spreadsheet which does
												not contain relationship information.</p>
											<div id="root-col-sp2" class="form-group">
												<label class="col-md-4 control-label" for="sp-upload-2"><span
													th:text="#{process.col.column2.form.browse.label}"></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<div class="input-group">
															<span class="input-group-btn"> <span
																class="btn btn-primary btn-file"> <span
																	th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																	<input name="spreadsheet" id="sp-upload-2" type="file"
																	class="form-control" />
															</span><input type="text" class="form-control"
																readonly="readonly" />
															</span>
														</div>
														<span th:utext="#{process.col.column2.form.browse.help}"
															class="help-block"> Select the file to upload</span>
													</div>
												</div>
											</div>
											<input th:field="${filesModel.collectionsIds}" type="hidden"
												value="NOCOLLECTION" />
											<div class="form-group">
												<label class="col-md-4 control-label" for="load1"><span></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<input id="load1" class="btn btn-primary"
															th:value="#{process.col.column2.form.submit}"
															name="_eventId_uploadRelSp" type="submit"
															value="Upload Spreadsheet" />
													</div>
												</div>
											</div>
										</fieldset>
									</form>
									<br />
									<form id="form-collection3" th:action="${flowExecutionUrl}"
										class="form-horizontal" method="post"
										enctype="multipart/form-data">
										<fieldset>
											<legend th:text="#{process.col.column2.form2.title}">2.
												Upload a sub-collection level spreadsheet with relationship
												information</legend>
											<p th:utext="#{process.col.column2.text6}">Use this
												option if uploading a sub-collections one where the
												&quot;rel:isPartOf&quot; has been filled in manually.</p>
											<div id="root-col-sp3" class="form-group">
												<label class="col-md-4 control-label" for="sp-upload-1"><span
													th:text="#{process.col.column2.form.browse.label}"></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<div class="input-group">
															<span class="input-group-btn"> <span
																class="btn btn-primary btn-file"> <span
																	th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																	<input name="spreadsheet" id="sp-upload-3" type="file"
																	class="form-control" />
															</span><input type="text" class="form-control"
																readonly="readonly" />
															</span>
														</div>
														<span th:utext="#{process.col.column2.form.browse.help}"
															class="help-block"> Select the file to upload</span>
													</div>
												</div>
											</div>
											<input th:field="${filesModel.collectionsIds}" type="hidden"
												value="NOCOLLECTION" />
											<div class="form-group">
												<label class="col-md-4 control-label" for="load2"><span></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<input id="load2" class="btn btn-primary"
															name="_eventId_upload" type="submit"
															th:value="#{process.col.column2.form.submit}"
															value="Upload Spreadsheet" />
													</div>
												</div>
											</div>
										</fieldset>
									</form>
								</div>
							</div>
							<div th:unless="${rootCollection == ''}" id="sub-collection"
								class="tab-pane fade">
								<div id="p-tree" th:if="${printTree}"
									th:utext="${printTree.get(0)}" class="well">the printed tree here</div>
								<div id="divCollection">
									<form id="form-collection4" th:action="${flowExecutionUrl}"
										class="form-horizontal" method="post"
										enctype="multipart/form-data">
										<fieldset>
											<legend th:text="#{process.col.column2.form3.title}">Sub-collection
												Spreadsheet</legend>
											<p th:text="#{process.col.column2.text7}">Upload a
												sub-collection level spreadsheet which does not contain
												relationship information (rel:isPartOf field is not
												present). Instead choose the parent collection from the drop
												down list of Collections.</p>
											<div id="sub-col-sp" class="form-group">
												<label class="col-md-4 control-label" for="sub-col-select"><span
													th:text="#{process.col.column2.form3.select}">Parent
														collection selection</span></label>
												<div class="col-md-4">
													<div class="input-group">
														<select id="sub-col-select" name="collectionsIds"
															class="form-control"
															onchange='javascript:sendPrintRequest("form-collection4", "print", this.value);'>
															<option value="NULLVALUE">-------</option>
															<option th:if="${rootCollection != ''}"
																th:value="${rootCollection}"
																th:text="#{fileView.column2.form3.parent}"
																th:selected="${printTree} and ${rootCollection == printTree.get(1)}">Parent
																Collection</option>
															<option th:with="element=${actualCollection.split(';')}"
																th:each="actualCollection : ${collectionsList}"
																th:value="${element[0]}"
																th:selected=" ${printTree} and ${element[0] == printTree.get(1)}"
																th:text="${element[1]}"></option>
														</select>
													</div>
													<span th:utext="#{process.col.column2.form3.select.help}"
														class="help-block"> See <b>*</b> in the information
														pane.
													</span>
												</div>
											</div>
											<div id="sub-col-sp1" class="form-group">
												<label class="col-md-4 control-label" for="sp-upload-1"><span
													th:text="#{process.col.column2.form.browse.label}"></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<div class="input-group">
															<span class="input-group-btn"> <span
																class="btn btn-primary btn-file"> <span
																	th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																	<input name="spreadsheet" id="sp-upload-4" type="file"
																	class="form-control" />
															</span><input type="text" class="form-control"
																readonly="readonly" />
															</span>
														</div>
														<span th:utext="#{process.col.column2.form.browse.help}"
															class="help-block"> Select the file to upload</span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label"
													for="subcollection-submit"><span></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<input id="subcollection-submit" class="btn btn-primary"
															name="_eventId_upload" type="submit"
															th:value="#{process.col.column2.form.submit}"
															value="Upload Spreadsheet" />
													</div>
												</div>
											</div>
										</fieldset>
									</form>
								</div>
							</div>
						</div>
						<!-- DIV TABS -->
					</div>
				</div>
			</div>
		</div>
		<!-- Progress Bar -->
		<div class="modal js-loading-bar">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<h4 th:text="#{fileView.progressTitle}">Loading Templates</h4>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-info" style="width: 0%;"></div>
						</div>
						<span id="pbtext" class="hide" th:text="#{fileView.pbMessage}">Loading...
							Please be patient</span> <strong><span id="pbtxt" class="hide"
							style="text-align: center; width: 100%;"
							th:text="#{fileView.pbMessage}">Loading... Please be
								patient</span></strong>
					</div>
				</div>
			</div>
		</div>
		<!-- DIV content -->
		<div id="footer" th:include="fragments/footer :: footer"></div>
	</div>
	<script>
		/*http://stackoverflow.com/questions/16808205/keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload/16813902#16813902*/
		$(document).ready(
				function() {

					/*Tooltips*/
					$('[data-toggle="tooltip"]').tooltip({
						'placement' : 'top'
					});

					$('[data-toggle="popover"]').popover({
						trigger : 'hover',
						'placement' : 'top'
					});
					// Holds the internal ID of the callback interval for the progress bar
					var intervalID;

					function initProgressBar() {
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						var is_chrome = window.chrome;
						if (is_chrome) {
							$bar.css('width', '100%');
							$bar.text($('#pbtext').text());
							$modal.modal('show');
						} else {
							$modal.modal('show');
							intervalID = setInterval(getDataFromServer, 1500);
						}
					}

					function clearTimer() {
						clearInterval(intervalID);
						console.log("Interval cleared");
					}

					/* Initiate progress bar calls */
					function getDataFromServer() {
						dwrService.getActualProgress({
							callback : getDataFromServerCallBack,
							errorHandler : function(errorString, exception) {
								console.log("Oops: " + errorString);
							}
						});
					}

					function getDataFromServerCallBack(dataFromServer) {
						// Modify Progress bar
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						$bar.css('width', dataFromServer);
						if (dataFromServer.progress == "0%") {
							$('#pbtxt').removeClass('hide');
							$('#pbtxt').addClass('show');
						}
						//$('#pbtxt').text(dataFromServer.info);
						if (dataFromServer.progress == "100%")
							clearTimer();
					}

					$('.js-loading-bar').modal({
						backdrop : 'static',
						show : false
					});

					$('#load').click(function() {
						initProgressBar();
					});
					$('#load1').click(function() {
						initProgressBar();
					});
					$('#load2').click(function() {
						initProgressBar();
					});
					$('#subcollection-submit').click(function() {
						initProgressBar();
					});

					$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
						//save the latest tab; use cookies if you like 'em better:
						localStorage.setItem('lastTab', $(this).attr('href'));
					});

					//go to the latest tab, if it exists:
					var lastTab = localStorage.getItem('lastTab');
					if (lastTab) {
						$('a[href=' + lastTab + ']').tab('show');
					} else {
						// Set the first tab if cookie do not exist
						$('a[data-toggle="tab"]:first').tab('show');
					}
				});
	</script>
</body>
</html>